<!--
 * @Author: ZhaoZhiqi
 * @Date: 2023-05-10 16:33:20
 * @LastEditors: Kevin Zhao
 * @LastEditTime: 2023-05-10 20:52:22
 * @Description: 用户信息
 * @FilePath: \tuanfeng-mini\src\pages\user_info.vue
-->
<template>
    <div class="container">
        <div class="wrapper">
            <div class="avatar" :style="{ backgroundImage: `url(${avatarUrl})` }">
                <div class="avatar-btn" @click="choose"></div>
            </div>
            <div class="tip">点击头像选择图片上传</div>
            <div class="cell">
                <div class="label">昵称</div>
                <input type="text" v-model="name" placeholder="请填写昵称" />
            </div>
        </div>
        <u-button class="btn" type="primary" ripple shape="circle" @click="submit">确定修改</u-button>
    </div>
</template>
<script>
import { getUserInfoAPI, updateUserInfoAPI } from "../api/user";
import { mapState, mapMutations, mapActions } from "vuex";

export default {
    data() {
        return {
            avatarUrl: "",
            name: "",
            fileList: [],
        };
    },
    computed: {
        ...mapState(["avatar", "nickname", "openId"]),
    },
    created() {
        this.avatarUrl = this.avatar;
        this.name = this.nickname;
    },
    methods: {
        ...mapMutations(["setData"]),
        ...mapActions(["getUserProfile", "getOpenId"]),
        choose() {
            wx.chooseImage({
                count: 1,
                type: "all",
                success: (res) => {
                    const tempFilePaths = res.tempFiles;
                    console.log(tempFilePaths[0].path);
                    let requestList = [];

                    tempFilePaths.forEach((item, index) => {
                        let promise = new Promise((resolve, reject) => {
                            wx.uploadFile({
                                url: "https://tuanfeng.whkxzj.com/file/upload",
                                filePath: tempFilePaths[index].path, //本地地址
                                name: "file",
                                success: (res) => {
                                    resolve(res);
                                },
                                fail: (err) => {
                                    reject(err);
                                },
                            });
                        });
                        requestList.push(promise);
                    });

                    wx.showLoading({
                        title: "上传中...",
                    });
                    Promise.all(requestList)
                        .then((res) => {
                            res.forEach((item) => {
                                console.log(item);
                                if (item.statusCode === 200) {
                                    let data = JSON.parse(item.data) || {};
                                    if (data.code === 200) {
                                        this.avatarUrl = data.data.url;
                                    } else {
                                        throw new Error(JSON.stringify(item));
                                    }
                                } else {
                                    throw new Error(JSON.stringify(item));
                                }
                            });
                            wx.hideLoading();
                        })
                        .catch((err) => {
                            console.log("上传错误", err);
                            wx.showToast({
                                title: "上传错误",
                                icon: "error",
                            });
                        });
                },
            });
        },
        submit() {
            if (!this.avatarUrl) {
                wx.showToast({
                    title: "请上传头像",
                    icon: "none",
                });
                return false;
            }
            if (!this.name) {
                wx.showToast({
                    title: "请填写昵称",
                    icon: "none",
                });
                return false;
            }
            updateUserInfoAPI({
                openId: this.openId,
                avatar: this.avatarUrl,
                nickName: this.name,
            }).then((res) => {
                this.setData({ key: 'avatar', value: this.avatarUrl });
                this.setData({ key: 'nickname', value: this.name });
                wx.setStorageSync('avatar', this.avatarUrl);
                wx.setStorageSync('nickname', this.name);
                wx.showToast({
                    title: "修改成功",
                    icon: "success",
                });
                setTimeout(() => {
                    this.$u.route({ type: "back" });
                }, 1500);
            });
        },
    },
};
</script>
<style scoped lang="scss">
@import "../assets/scss/common.scss";
.container {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #efefef;
}
.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #fff;
    .avatar {
        flex: none;
        width: 120rpx;
        height: 120rpx;
        margin: 80rpx 0 0;
        border-radius: 50%;
        border: 1px solid #efefef;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-color: #fff;
        .avatar-btn {
            width: 100%;
            height: 100%;
        }
    }
    .tip {
        color: #999;
        font-size: 26rpx;
        margin: 30rpx 0 60rpx;
    }
    .cell {
        flex: none;
        width: 95%;
        display: flex;
        padding: 28rpx 20rpx;
        border-top: 1px solid #efefef;
        border-bottom: 1px solid #efefef;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        .label {
            width: 100rpx;
            color: #999;
            font-size: 30rpx;
        }
        input {
            border: none;
            text-align: right;
        }
    }
}
.btn {
    position: fixed;
    left: 30px;
    right: 30px;
    bottom: 50px;
}
</style>
